<!--使用说明-->
<script setup>
import { QuestionFilled } from '@element-plus/icons-vue'

const props = defineProps({
  tipsContent: String,
  isFlex: {
    type: Boolean,
    default: false
  },
  isLeft: {
    type: Boolean,
    default: false
  }
})
</script>
<template>
  <div class="tool-tips-group" :style="{width:isFlex?'100%':'auto'}">
    <template v-if="isLeft">
      <ElTooltip
          effect="dark"
          :content="props.tipsContent"
          placement="bottom"
      >
        <ElButton class="ml-1 ques-btn" tabindex="-1" type="warning" size="large" :icon="QuestionFilled" link/>
      </ElTooltip>
    </template>
    <div :class="{'flex-1':isFlex}">
      <slot/>
    </div>
    <template v-if="!isLeft">
      <ElTooltip
          effect="dark"
          :content="props.tipsContent"
          placement="bottom"
      >
        <ElButton class="ques-btn" tabindex="-1" type="warning" size="large" :icon="QuestionFilled" link/>
      </ElTooltip>
    </template>
  </div>
</template>

<style lang="scss">
.tool-tips-group {
  @include flex;

  .ques-btn {
    font-size: 18px;
  }
}
</style>
